<template>
  <div v-infinite-scroll = "test1" infinite-scroll-distance = '1'>
    <!--视频导航-->
    <el-row>
      <el-col class = "row-container" style = "justify-content: space-between">
        <song-category-popover-one-layer :navList = "navList"
                                         :selectedTagId = "selectedTagId" :placement = "1" />
        <category-static-navigation :navTagList = "navTagList" />
      </el-col>
    </el-row>
    <!--视频列表-->
    <el-row style = "margin-top: 10px">
      <el-col>
        <el-space wrap :size = "50">
          <div v-for = "item in 10" :key = "item">
            <el-image style = "width: 300px; height: 100px" :src = "logo"></el-image>
            <div class = "column-container ">
              <span class = "content-title">title</span>
              <span class = "content-author">by &nbsp;<span>author</span></span>
            </div>
          </div>
        </el-space>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import SongCategoryPopoverOneLayer from '@/components/reuse/CategoryPopoverOneLayer'
import CategoryStaticNavigation from '@/components/reuse/CategoryStaticNavigation'
import logo from "@/assets/logo.png";

import {ref} from "vue";

const navTagList = ['华语', '流行', '摇滚', '民谣', '还有', '什么']
let selectedTagId = ref(1)
const navList = [
  {
    category1Name: '语种',
    category1List: [
      {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      },
      {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      },
      {
        category2Id: 1,
        category2Name: '华语',
      }
    ]
  },
  {
    category1Name: '语种',
    category1List: [
      {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }
    ]
  },
  {
    category1Name: '语种',
    category1List: [
      {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }
    ]
  },
]

//infinite-scroll
function test1() {
  console.log('video-tag')
}
</script>

<style lang = "less" scoped>
.content-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-author {
  font-size: 8px;
  color: #989696;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>